<template lang="html">
  <section class="section1">
    <ul class="section1-list">
      <li v-for="(k,i) in list" :key="k.id" style="margin-bottom: 12px;">
          <div class="word" @click="goto(i)">
            <h3>{{k.courseName}}</h3>
            <div>
              <p class="money">￥{{k.realPrice}}</p>
              <p class="buy">{{k.payCount}}人购买</p>
            </div>
          </div>
          <img v-lazy="k.courseImage" alt="">
      </li>
    </ul>
  </section>
</template>

<script>
import { Lazyload } from 'mint-ui';

export default {
  data() {
    return {
      url:"http://47.97.101.251:8886/"
    }
  },


  props: {
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods:{
    goto(i)
    {
      localStorage.setItem("detail",JSON.stringify(this.list[i]))
      this.$router.push({path:`/detail`})
    }
  }

}

</script>

<style lang="less" scoped>
@import "../../assets/fz.less";
@import "../../assets/index/style.css";
.section1 {
  .section1-list {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 0 2vw 4vw 2vw;
    li {
      width: 100%;
      padding: 1vw;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: flex;
      cursor: pointer;
      .word{
        flex: 1;
        display: flex;
        margin-right: 12px;
        flex-direction: column;
        div{
          flex-grow: 1;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
        }
        h3{
          font-size: 6.2vw;
          font-weight: bolder;
          color: #333;
          margin-bottom: 1vw;
        }
        .money{
          font-size: 6vw;
          color: #ff0000;
        }
        .buy{
          font-size: 5.5vw;
          color: #999;
          text-align: end;
        }
      }
      img {
        width: 200px;
        max-width: 45vw;
        display: block;
        object-fit: cover;
        height: 30vw;
        max-height: 140px;
        border-radius: 8px;
      }
    }
  }
}
</style>
